<!-- 导入顺风车订单列表 -->
<template>
  <div class="import-sfc-order-list">
    <div ref="dgtools" class="filter-container">
      <div class="dgts-row">
        <el-form :model="dg.ps" :inline="true" @keyup.enter.native="getDgList">
          <el-form-item>
            <el-date-picker
              v-model="dg.ps.setime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 210px"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-input
              style="width: 150px"
              placeholder="查询备注"
              v-model="dg.ps.note">
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-select 
              v-model="dg.ps.status" 
              placeholder="请选择查询状态" 
              style="width: 100%">
              <el-option label="全部" value=""></el-option>
              <el-option label="未操作" value="0"></el-option>
              <el-option label="已生成顺风车订单" value="1"></el-option>
              <el-option label="已生成单位订单" value="2"></el-option>
            </el-select>
          </el-form-item>

          <el-button 
            type="primary" 
            icon="el-icon-search" 
            @click="getDgList">
            搜索
          </el-button>
          <el-button 
            type="success" 
            icon="el-icon-edit-outline" 
            @click="setAdupImportSfcOrderMd({state: true})">
            修改
          </el-button>
          <el-button 
            type="info" 
            icon="el-icon-delete" 
            @click="delImportSfcOrder">
            删除
          </el-button>
          <el-button 
            type="primary" 
            icon="el-icon-document-add" 
            @click="setCreateSfcOrderMd({state: true, isSelfCreate: false})">
            生成订单
          </el-button>
          <el-button 
            type="success" 
            icon="el-icon-document-add" 
            @click="setCreateSfcOrderMd({state: true, isSelfCreate: true})">
            手动生成订单
          </el-button>
        </el-form>
      </div>

    </div>
    
    <el-table
      :ref="dg.tbName"
      :data="dg.list"
      row-key="id"
      :height="bodyHeight"
      border fit 
      :row-class-name="rowClassName"
      @header-dragend="dragHeader"
      @selection-change="selRowChange">
      <el-table-column fixed="left" type="selection" width="40"></el-table-column>
      <el-table-column 
        v-for="(col, index) in dg.columns" 
        :key="index"
        :class-name="dg.dgName"
        :prop="col.field"
        :label="col.label"
        :width="col.width">
        <template slot-scope="{row}">
          <template v-if="col.field == 'cusId'">
            <div>{{`${row.cusId.baseUserId.realName}（${row.cusId.baseUserId.phone}）`}}</div>
            <div>{{row.cusId.companyUserId.companyName}}</div>
          </template>

          <template v-else-if="col.field == 'status'">
            <span class="c-blue" v-if="row.status == 1">已生成顺风车订单</span>
            <span class="c-green" v-else-if="row.status == 2">已生成单位订单</span>
            <span class="c-red" v-else>未操作</span>
          </template>

          <template v-else-if="col.field == 'isFindTravelInfo'">
            <span class="c-red" v-if="row.isFindTravelInfo == -1">需要</span>
            <span class="c-black" v-else>未操作</span>
          </template>

          <template v-else-if="col.field == 'travelUnit'">
            <div>{{row.travelUnit}}</div>
            <div v-if="row.unitPhone">联系电话：{{row.unitPhone}}</div>
          </template>

          <template v-else-if="col.field == 'stationId'">
            <span>{{row.stationId && row.stationId.name}}</span>
          </template>

          <template v-else>{{getColVal(row, col.field)}}</template>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="dg.total > 0" 
      :total="dg.total" :page.sync="dg.ps.page" 
      :limit.sync="dg.ps.rows" @pagination="getDgList"/>

    <AdupImportSfcOrder 
      v-if="adupImportSfcOrderMd.state" 
      :myData="adupImportSfcOrderMd"
      @myClick="setAdupImportSfcOrderMd"
      @reloadDg="getDgList"
    />

    <CreateSfcOrder 
      v-if="createSfcOrderMd.state" 
      :myData="createSfcOrderMd"
      @myClick="setCreateSfcOrderMd"
      @reloadDg="getDgList"
    />

  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import DataGridResize from '@/views/mixins/DataGridResize';
import Pagination from '@/components/Pagination';

import AdupImportSfcOrder from '../adup-import-sfc-order';
import CreateSfcOrder from '../create-sfc-order';

import * as orderSer from '@/api/services/order.service';

export default {
  mixins: [ DataGridBase, DataGridResize],
  directives: { elDragDialog },
  components:{ Pagination, AdupImportSfcOrder, CreateSfcOrder },
  props: { myData: Object },
  data() { 
    let cols = [
      {label: '状态', field: 'status', width: 100},
      {label: '是否需手动生成', field: 'isFindTravelInfo', width: 100},
      {label: '用车方', field: 'cusId', width: 200},
      {label: '团号', field: 'travelNum', width: 100},
      {label: '组团社', field: 'travelUnit', width: 200},
      {label: '业务员（外联）', field: 'travelDuty', width: 120},
      {label: '乘车人信息', field: 'passengersInfo', width: 120},
      {label: '客人信息', field: 'cusInfo', width: 120},
      {label: '行程详情', field: 'routeDetail', width: 200},
      {label: '客源', field: 'cusResource', width: 120},
      {label: '乘车人数', field: 'customers', width: 120},
      {label: '人数中文', field: 'cusCount', width: 120},
      {label: '客户电话', field: 'cusPhone', width: 120},
      {label: '接送类型', field: 'shuttleType', width: 120},
      {label: '操作日期', field: 'travelTime', width: 150},
      {label: '酒店', field: 'travelHotel', width: 150},
      {label: '班次', field: 'travelWayNum', width: 150},
      {label: '站点', field: 'stationId', width: 150},
      {label: '接送描述', field: 'travelNote', width: 150},
      {label: '添加时间', field: 'addTime', width: 150}
    ];
    return {
      dg: {
        dgName: 'dg',
        tbName: 'importSfcOrderListTb',
        total: 0,
        list: [],
        srcCols: cols,
        columns: [],
        selRows: [],
        ps: {
          page: 1, rows: 100,
          // 查询客户用户名
          cusUname: null,
          // 组团社名称 eg:四川公司
          travelUnit: null,
          // 添加起止时间
          setime: [],
          // 备注
          note: null,
          // 状态 eg:0未操作 1已生成顺风车订单 2已生成单位订单
          status: null
        },
      },

      // 添加/修改-弹框
      adupImportSfcOrderMd: {state: false},
      // 生成顺风车订单-弹框
      createSfcOrderMd: {state: false},
    }
  },
  created() {
    const that = this;

    that.initTbSetData(that.dg.dgName);
    that.getDgList();
  },
  methods:{
    getDgList(){
      const that = this, U = that.U, dg = that.dg, ps = U.scopy(dg.ps);
      
      if(ps.setime.length == 2){
        ps.sTime = ps.setime[0];
        ps.eTime = ps.setime[1];
        delete ps.setime;
      }
      orderSer.findImportSfcOrderPageList(ps).then(res => {
        if(res.code == 1){
          let list = res.data;
          for(let i in list){list[i].dgName = dg.dgName;}
      
          dg.list = list;
          dg.total = res.count;
        }
      });
    },
    /** 打开/关闭-添加/修改-弹框 */
    setAdupImportSfcOrderMd(e){
      const that = this, U = that.U, md = that.adupImportSfcOrderMd;

      if(!e.state){// 关闭-弹框
        md.state = false;
      }else{// 打开-弹框
        if(e.type == 0){
          md.state = true;
          md.obj = null;
        }else{
          let rows = that.getSeledRows();
          if(rows.length !== 1){
            U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
          }else{
            let row = rows[0];
            if(row.status != 0){
              U.qerror(`只有【未操作】的导入订单才能修改`);
            }else{
              md.state = true;
              md.obj = rows[0];
            }
          }
        }
      }
    },
    // 删除
    delImportSfcOrder(){
      const that = this, U = that.U, rows = that.getSeledRows();

      if(rows.length < 1){
        U.qerror('请至少选择一条数据');
      }else{
        U.qconfim(`确认删除所选数据吗？`).then(r => {
          if(r){
            orderSer.delImportSfcOrder({ids: rows.map(it => it.id).join(',') }).then(res => {
              if(res.code !== 1){
                U.qerror(res.msg);
              }else{
                U.qsuccess(res.msg);

                // 刷新列表
                that.getDgList();
              }
            });
          }
        });
      }
    },

    // 生成平台订单
    setCreateSfcOrderMd(e){
      const that = this, U = that.U, md = that.createSfcOrderMd, rows = that.getSeledRows();
      
      if(!e.state){// 关闭-弹框
        md.state = false;
        md.ids = null;
      }else{// 打开-弹框
        if(e.isSelfCreate){
          if(rows.length !== 1){
            U.qerror(`${rows.length == 0 ? '请' : '只能'}选择一条数据`);
          }else{
            let ids = rows.map(it => it.id).join(',');

            // 是否是手动生成
            md.isSelfCreate = true;
            md.ids = ids;
            md.state = true;
          }
        }else{
          if(rows.length == 0){
            U.qerror(`至少选择一条数据`);
          }else if(rows.length > 100){
            U.qerror(`最多选择100条数据`);
          }else{
            // 如果存在需要手动生成的订单，则提示
            let noStr = rows.filter(it => it.isFindTravelInfo == -1).map(it => (it.index + 1)).join('、');
            if(noStr) return U.qerrorFalse(`第${noStr}行订单需要手动生成，请取消！`);

            let ids = rows.map(it => it.id).join(',');
            
            // 请求验证所选订单是否有航班/车次号
            orderSer.valiSfcOrder({ids: ids}).then(res => {
              if(res.code !== 1){
                  // 存在验证不通过的订单，则刷新列表
                  that.getDgList();

                  U.qalert('存在无班次信息的订单，需要手动生成！');
                }else{
                  // 是否是手动生成
                  md.isSelfCreate = false;
                  md.ids = ids;
                  md.state = true;
                }
            });
          }
        }
      }
    },

  },
 }
</script>